import React,{ Component } from 'react'
import { connect } from 'react-redux'
import DiskNode from './DiskNode'

class DiskNodeSet extends Component {
  constructor(props){
    super(props)
    this.selectStack = this.props.selectStack
  }

  componentWillUpdate = () => {
    this.selectStack.dirs = Array(0)
    this.selectStack.files = Array(0)
  }

  render() {
    const loopDir = data => data.map((item) => {
      return <DiskNode
      key={item.directory}
      type='folder'
      id={item.directory}
      name={item.tag}
      stack={this.selectStack}
      Refresh={this.props.Refresh}
      />
    })
    const loopFile = data => data.map((item) => {
      return <DiskNode
      key={item.file}
      type={item.ext}
      id={item.file}
      name={item.tag}
      stack={this.selectStack}
      Refresh={this.props.Refresh}
      />
    })
    return (
      <div style={{padding:'10px'}}>
      {loopDir(this.props._Dirs)}
      {loopFile(this.props._Files)}
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    _Dirs: state.disk.Node.dirs,
    _Files: state.disk.Node.files
  }
}

export default connect(mapStateToProps)(DiskNodeSet)
